import React, { useState } from "react";
import Knob from "../components/Knob";
import {
  scaleChange,
  positionChange,
  resetModel,
  setColor,
  resetCamera,
} from "../utils/viewHelp";
import { Axis } from "../utils/constant";
import {
  InputNumberProps,
  ColorPickerProps,
  Slider,
  Button,
  SliderSingleProps,
  ColorPicker,
  Checkbox,
  CheckboxProps,
} from "antd";
import { RedoOutlined, RetweetOutlined } from "@ant-design/icons";

const Operator: React.FC = () => {
  const [rotateValueX, setrotateValueX] = useState(100);
  const [rotateValueY, setrotateValueY] = useState(100);
  const [rotateValueZ, setrotateValueZ] = useState(100);
  const [positionValueX, setpositionValueX] = useState(0);
  const [positionValueY, setpositionValueY] = useState(0);
  const [positionValueZ, setpositionValueZ] = useState(0);
  const [colorValue, setcolorValue] =
    useState<ColorPickerProps["value"]>("#FFFFFF");
  const [isScaleAll, setisScaleAll] = useState(false);

  const scaleMarks: SliderSingleProps["marks"] = {
    0: "0%",
    250: "250%",
    500: "500%",
    750: "750%",
    1000: "1000%",
  };
  const positionMarks: SliderSingleProps["marks"] = {
    "-1000": "-1000",
    "-666": "-666",
    "-333": "-333",
    "0": "0",
    "333": "333",
    "666": "666",
    "1000": "1000",
  };

  const handleScaleX: InputNumberProps["onChange"] = (value) => {
    if (isNaN(value as number)) {
      return;
    }
    if (isScaleAll) {
      setrotateValueX(value as number);
      setrotateValueY(value as number);
      setrotateValueZ(value as number);
      scaleChange(rotateValueX, Axis.x);
      scaleChange(rotateValueX, Axis.y);
      scaleChange(rotateValueX, Axis.z);
    } else {
      setrotateValueX(value as number);
      scaleChange(rotateValueX, Axis.x);
    }
  };

  const handleScaleY: InputNumberProps["onChange"] = (value) => {
    if (isNaN(value as number)) {
      return;
    }
    if (isScaleAll) {
      setrotateValueX(value as number);
      setrotateValueY(value as number);
      setrotateValueZ(value as number);
      scaleChange(rotateValueY, Axis.x);
      scaleChange(rotateValueY, Axis.y);
      scaleChange(rotateValueY, Axis.z);
    } else {
      setrotateValueY(value as number);
      scaleChange(rotateValueY, Axis.y);
    }
  };

  const handleScaleZ: InputNumberProps["onChange"] = (value) => {
    if (isNaN(value as number)) {
      return;
    }
    if (isScaleAll) {
      setrotateValueX(value as number);
      setrotateValueY(value as number);
      setrotateValueZ(value as number);
      scaleChange(rotateValueZ, Axis.x);
      scaleChange(rotateValueZ, Axis.y);
      scaleChange(rotateValueZ, Axis.z);
    } else {
      setrotateValueZ(value as number);
      scaleChange(rotateValueZ, Axis.z);
    }
  };

  const handleScaleAll: CheckboxProps["onChange"] = (event) => {
    setisScaleAll(event.target.checked);
  };

  const formatter: NonNullable<SliderSingleProps["tooltip"]>["formatter"] = (
    value
  ) => `${value}%`;

  const handlePositionX: InputNumberProps["onChange"] = (value) => {
    if (isNaN(value as number)) {
      return;
    }
    setpositionValueX(value as number);
    positionChange(positionValueX, Axis.x);
  };

  const handlePositionY: InputNumberProps["onChange"] = (value) => {
    if (isNaN(value as number)) {
      return;
    }
    setpositionValueY(value as number);
    positionChange(positionValueY, Axis.y);
  };

  const handlePositionZ: InputNumberProps["onChange"] = (value) => {
    if (isNaN(value as number)) {
      return;
    }
    setpositionValueZ(value as number);
    positionChange(positionValueZ, Axis.z);
  };

  const handleReset = () => {
    resetModel();
    setrotateValueX(100);
    setrotateValueY(100);
    setrotateValueZ(100);
    setpositionValueX(0);
    setpositionValueY(0);
    setpositionValueZ(0);
  };

  return (
    <div className="w-2/5 p-5">
      <div className="text-lg">模型旋转：请点击旋钮后按住鼠标进行选择</div>
      <div className="flex justify-around">
        <div className="w-1/3">
          <Knob axis={Axis.x}></Knob>
        </div>
        <div className="w-1/3">
          <Knob axis={Axis.y}></Knob>
        </div>
        <div className="w-1/3">
          <Knob axis={Axis.z}></Knob>
        </div>
      </div>
      <div className="text-lg mt-3">模型缩放：默认非等比例缩放</div>
      <div className="flex justify-center items-center p-3">
        <span className="mr-6">X:</span>
        <Slider
          className="w-full"
          min={10}
          max={1000}
          marks={scaleMarks}
          tooltip={{ formatter }}
          onChange={handleScaleX}
          value={typeof rotateValueX === "number" ? rotateValueX : 0}
        />
      </div>
      <div className="flex justify-center items-center p-3">
        <span className="mr-6">Y:</span>
        <Slider
          className="w-full"
          min={10}
          max={1000}
          marks={scaleMarks}
          tooltip={{ formatter }}
          onChange={handleScaleY}
          value={typeof rotateValueY === "number" ? rotateValueY : 0}
        />
      </div>
      <div className="flex justify-center items-center p-3">
        <span className="mr-6">Z:</span>
        <Slider
          className="w-full"
          min={10}
          max={1000}
          marks={scaleMarks}
          tooltip={{ formatter }}
          onChange={handleScaleZ}
          value={typeof rotateValueZ === "number" ? rotateValueZ : 0}
        />
      </div>
      <div className="flex items-center mb-3 pl-12 justify-between">
        <Checkbox checked={isScaleAll} onChange={handleScaleAll}>
          等比例缩放
        </Checkbox>
        <Button
          className="flex justify-center items-center"
          type="primary"
          onClick={handleReset}
        >
          <RedoOutlined />
          模型重制
        </Button>
        <Button
          className="flex justify-center items-center"
          type="primary"
          onClick={resetCamera}
        >
          <RetweetOutlined />
          相机重制
        </Button>
      </div>

      <div className="pd-3 text-lg">模型位移：</div>
      <div className="flex justify-center items-center p-3">
        <span className="mr-6">X:</span>
        <Slider
          className="w-full"
          min={-1000}
          max={1000}
          marks={positionMarks}
          onChange={handlePositionX}
          value={typeof positionValueX === "number" ? positionValueX : 0}
        />
      </div>
      <div className="flex justify-center items-center p-3">
        <span className="mr-6">Y:</span>
        <Slider
          className="w-full"
          min={-1000}
          max={1000}
          marks={positionMarks}
          onChange={handlePositionY}
          value={typeof positionValueY === "number" ? positionValueY : 0}
        />
      </div>
      <div className="flex justify-center items-center p-3">
        <span className="mr-6">Z:</span>
        <Slider
          className="w-full"
          min={-1000}
          max={1000}
          marks={positionMarks}
          onChange={handlePositionZ}
          value={typeof positionValueZ === "number" ? positionValueZ : 0}
        />
      </div>
      <div className="pd-3 text-lg mb-3">
        颜色切换：请先选择颜色后点击目标物体
      </div>
      <ColorPicker
        className="ml-10"
        showText
        defaultValue="#FFFFFF"
        size="large"
        value={colorValue}
        onChangeComplete={(color) => {
          setcolorValue(color);
          setColor(color.toHexString());
        }}
      />
    </div>
  );
};

export default Operator;
